<template>
  <div class="box">
    <div class="header">
      <h2>客户毛利测算表</h2>
      <div
        style="display: flex; justify-content: flex-end; margin-bottom: 20px"
      >
        <el-button v-for="e in settings" :key="e.id" @click="config(e)">{{
          e.title
        }}</el-button>
      </div>
      <t-table
        row-key="id"
        :columns="columns"
        :data="tableData && tableData.list && tableData.list.list"
        :editable-cell-state="editableCellState"
        :loading="tloading"
        bordered
      />
      <hr />
    </div>
    <div class="content">
      <el-table
        max-height="550"
        border
        :data="pTableData && pTableData.list && pTableData.list.list"
        tooltip-effect="dark"
        v-loading="loading"
      >
        <el-table-column
          v-for="(t, n) in pTableData.fields"
          :key="n"
          :prop="t.fields"
          :label="t.translate"
          align="center"
          :min-width="
            flexColumnWidth(t.translate, t.fields, tableData.list.list)
          "
        />
      </el-table>
    </div>
    <div class="footer">
      <pagination
        :current-page="pPageDate.pageNum"
        :page-size="pPageDate.pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div v-if="maskFlag" class="mask">
      <div class="table">
        <div class="flex">
          <div class="title">{{ maskTitle }}</div>
          <i class="el-icon-close" @click="close"></i>
        </div>
        <el-button type="primary" @click="addForm">新增</el-button>
        <t-table
          row-key="id"
          :columns="settingColumns"
          :data="sTableData.list"
          :editable-cell-state="editableCellState"
          :max-height="700"
          :loading="tloading"
          bordered
        />
      </div>
      <div v-if="maskForm" class="add">
        <div class="form">
          <div class="flex">
            <div class="title">{{ "新增" + maskTitle + "参数" }}</div>
            <i class="el-icon-close" @click="closeForm"></i>
          </div>
          <el-form label-position="left" label-width="150px" :model="formData">
            <el-form-item v-if="activeId != 3" label="目的省份">
              <el-input v-model="formData.province"></el-input>
            </el-form-item>
            <el-form-item v-if="activeId == 1" label="目的城市">
              <el-input v-model="formData.city"></el-input>
            </el-form-item>
            <el-form-item v-if="activeId == 1" label="0.01-0.5kg">
              <el-input v-model="formData.zeroToHalf"></el-input>
            </el-form-item>
            <el-form-item v-if="activeId == 1" label="0.51-1kg">
              <el-input v-model="formData.halfToOne"></el-input>
            </el-form-item>
            <el-form-item v-if="activeId == 1" label="1.01-3kg">
              <el-input v-model="formData.oneToThree"></el-input>
            </el-form-item>
            <el-form-item v-if="activeId == 1" label="3.01-99kg">
              <el-input v-model="formData.overThree"></el-input>
            </el-form-item>

            <el-form-item v-if="activeId == 2" label="0.01-1kg（元/票）">
              <el-input v-model="formData.zeroToOne"></el-input>
            </el-form-item>
            <el-form-item v-if="activeId == 2" label="1.01-5kg">
              <el-input v-model="formData.oneToFive"></el-input>
            </el-form-item>
            <el-form-item v-if="activeId == 2" label="5.01-6kg（元/kg）">
              <el-input v-model="formData.fiveToSix"></el-input>
            </el-form-item>
            <el-form-item v-if="activeId == 2" label="6.01-99kg（元/票）">
              <el-input v-model="formData.overSix"></el-input>
            </el-form-item>

            <el-form-item v-if="activeId == 3" label="重量段">
              <el-input v-model="formData.weightSection"></el-input>
            </el-form-item>
            <el-form-item v-if="activeId == 3" label="返利标准">
              <el-input v-model="formData.rebateStandard"></el-input>
            </el-form-item>
          </el-form>
          <div class="btn">
            <el-button type="primary" round @click="save">保存</el-button>
            <el-button round @click="closeForm">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Input, MessagePlugin } from "tdesign-vue";

import {
  getGrossProfitListTop,
  editIncome,
  getProvinceList,
  getBasicList,
  editBasicList,
  addBasic,
  getTransferList,
  editTransferList,
  addTransfer,
  getRebateList,
  editRebateList,
  addRebate,
} from "@/api/statisticalCenter";

export default {
  data() {
    return {
      tloading: true,
      loading: true,
      sloading: true,
      tableData: [],
      pTableData: [],
      sTableData: [],
      pageDate: {
        pageNum: 1,
        pageSize: 10,
      },
      pPageDate: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      settings: [
        {
          id: 1,
          title: "派费调整",
        },
        {
          id: 2,
          title: "中转费报价",
        },
        {
          id: 3,
          title: "返利标准",
        },
      ],
      activeId: null,
      maskFlag: false,
      maskForm: false,
      maskTitle: null,
      loading: null,
      formData: {
        province: null, // 目的省份
        city: null, // 目的城市
        zeroToHalf: null, // 0.01-0.5kg
        halfToOne: null, // 0.51-1kg
        oneToThree: null, // 1.01-3kg
        overThree: null, // 3.01-99kg
        zeroToOne: null, // 0.01-1kg(元/票)
        oneToFive: null, // 1.01-5kg
        fiveToSix: null, // 5.01-6kg
        overSix: null, // 6.01-99kg
        weightSection: null, // 重量段
        rebateStandard: null, // 返利标准
      },
    };
  },
  computed: {
    columns() {
      return [
        {
          title: "均重",
          colKey: "counterpoise",
          align: "center",
          edit: this.editMethod(
            editIncome,
            this.tableData.list && this.tableData.list.list
          ),
        },
        {
          title: "面单收入",
          colKey: "sheetIncome",
          align: "center",
          edit: this.editMethod(
            editIncome,
            this.tableData.list && this.tableData.list.list
          ),
        },
        {
          title: "历史均票返利",
          colKey: "historyRebates",
          align: "center",
        },
        {
          title: "收入小计",
          colKey: "incomeSubtotal",
          align: "center",
        },
        {
          title: "面单费",
          colKey: "sheetFee",
          align: "center",
        },
        {
          title: "重量段均票成本",
          colKey: "weightTicketCost",
          align: "center",
        },
        {
          title: "成本小计",
          colKey: "costSubtotal",
          align: "center",
        },
        {
          title: "毛利",
          colKey: "grossProfit",
          align: "center",
        },
      ];
    },
    settingColumns() {
      if (this.activeId == 1) {
        return [
          {
            title: "目的省份",
            colKey: "province",
            align: "center",
          },
          {
            title: "目的城市",
            colKey: "city",
            align: "center",
          },
          {
            title: "0.01-0.5kg",
            colKey: "zeroToHalf",
            align: "center",
            edit: this.editMethod(editBasicList, this.sTableData.list),
          },
          {
            title: "0.51-1kg",
            colKey: "halfToOne",
            align: "center",
            edit: this.editMethod(editBasicList, this.sTableData.list),
          },
          {
            title: "1.01-3kg",
            colKey: "oneToThree",
            align: "center",
            edit: this.editMethod(editBasicList, this.sTableData.list),
          },
          {
            title: "3.01-99kg",
            colKey: "overThree",
            align: "center",
            edit: this.editMethod(editBasicList, this.sTableData.list),
          },
        ];
      } else if (this.activeId == 2) {
        return [
          {
            title: "目的省份",
            colKey: "province",
            align: "center",
          },
          {
            title: "0.01-1kg(元/票)",
            colKey: "zeroToOne",
            align: "center",
            edit: this.editMethod(editTransferList, this.sTableData.list),
          },
          {
            title: "1.01-5kg",
            colKey: "oneToFive",
            align: "center",
            edit: this.editMethod(editTransferList, this.sTableData.list),
          },
          {
            title: "5.01-6kg(元/kg)",
            colKey: "fiveToSix",
            align: "center",
            edit: this.editMethod(editTransferList, this.sTableData.list),
          },
          {
            title: "6.01-99kg(元/kg)",
            colKey: "overSix",
            align: "center",
            edit: this.editMethod(editTransferList, this.sTableData.list),
          },
        ];
      } else if (this.activeId == 3) {
        return [
          {
            title: "重量段",
            colKey: "weightSection",
            align: "center",
          },
          {
            title: "返利标准(元/票)",
            colKey: "rebateStandard",
            align: "center",
            edit: this.editMethod(editRebateList, this.sTableData.list),
          },
        ];
      }
    },
  },
  mounted() {
    this.getGrossProfitList();
    this.getProvinceDetailsList();
  },
  methods: {
    save() {
      let url =
        this.activeId == 1
          ? addBasic
          : this.activeId == 2
          ? addTransfer
          : addRebate;
      url(this.formData).then((res) => {
        if (res.code == 200) {
          MessagePlugin.success("添加成功！");
          this.closeForm();
          this.getSettingTableData();
        }
      });
    },
    addForm() {
      this.maskForm = true;
    },
    closeForm() {
      this.maskForm = false;
      this.formData = {};
    },
    editMethod(url, data) {
      return {
        component: Input,
        props: {
          clearable: true,
          autofocus: true,
        },
        abortEditOnEvent: ["onEnter"],
        onEdited: (context) => {
          url(context.newRowData).then((res) => {
            if (res.code == 200) {
              data.splice(context.rowIndex, 1, context.newRowData);
              MessagePlugin.success("修改成功！");
              this.getProvinceDetailsList();
            }
          });
        },
        rules: [{ required: true, message: "不能为空" }],
      };
    },
    config(item) {
      this.maskTitle = item.title;
      this.activeId = item.id;
      this.maskFlag = true;
      this.getSettingTableData();
    },
    close() {
      this.maskFlag = false;
      this.maskTitle = null;
      this.activeId = null;
    },
    getSettingTableData() {
      this.sloading = true;
      let url =
        this.activeId == 1
          ? getBasicList
          : this.activeId == 2
          ? getTransferList
          : getRebateList;
      url({ pageNum: 1, pageSize: 50 }).then((res) => {
        this.sTableData = res.data;
        this.sloading = false;
      });
    },
    editableCellState() {
      return true;
    },
    async getGrossProfitList() {
      this.tloading = true;
      await getGrossProfitListTop(this.pageDate).then((res) => {
        this.tableData = res.data;
        this.tloading = false;
      });
    },
    async getProvinceDetailsList() {
      this.loading = true;
      await getProvinceList({ pageDate: this.pPageDate }).then((res) => {
        this.pTableData = res.data;
        this.total = res.data.list.total;
        this.loading = false;
      });
    },
    handleSizeChange(size) {
      this.pPageDate.pageSize = size;
      this.getProvinceDetailsList();
    },
    handleCurrentChange(current) {
      this.pPageDate.pageNum = current;
      this.getProvinceDetailsList();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.header {
  h2 {
    text-align: center;
    color: skyblue;
  }

  hr {
    margin: 16px 0;
    color: skyblue;
  }

  &::v-deep .t-table {
    .t-table__header {
      tr th {
        font-size: 16px;
        font-weight: bolder;
      }
    }
    .t-table__body {
      tr td {
        font-size: 16px;
        font-weight: bolder;
        color: #666;
      }
    }
  }
}

.content,
.mask {
  &::v-deep .t-table {
    .t-table__header {
      tr th {
        font-size: 16px;
        font-weight: bolder;
      }
    }
    .t-table__body {
      tr td {
        font-size: 16px;
        font-weight: bolder;
        color: #666;
      }
    }
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba($color: #000000, $alpha: 0.2);
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
  }
  .title {
    padding-left: 12px;
    border-left: 6px solid skyblue;
    font-size: 24px;
    font-weight: bold;
  }
  i {
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }
  .table {
    margin: 80px auto;
    padding: 30px;
    width: 60%;
    border-radius: 24px;
    background-color: #fff;
    .el-button {
      margin-bottom: 20px;
    }
  }
  .add {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.2);
    .form {
      margin: 200px auto;
      padding: 30px 20px;
      width: 600px;
      border-radius: 24px;
      background-color: #fff;
      .el-form {
        padding: 0 30px;
      }
      .btn {
        display: flex;
        justify-content: space-around;
        .el-button {
          padding: 12px 36px;
          font-size: 16px;
        }
      }
    }
  }
}

.footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.table-operations {
  margin-bottom: 16px;
}

.table-operations > button {
  margin-right: 8px;
}
</style>
